<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>用户分布图</title>
  <script src="lib/echarts.min.js"></script>
  <script src="lib/jquery.min.js"></script>
  <script src="lib/itcast.js"></script>
</head>

<body>
  <div style="height:600px; "></div>

  <script>
    var mCharts = echarts.init(document.querySelector("div"), 'itcast')
     //file:///root/Desktop/bdfvr23rferfwe/dataInterface/lib/china.json
    $.get('http://127.0.0.1:9898/chinaData', function (ret) {
      // ret 就是中国的各个省份的矢量地图数据
      echarts.registerMap('chinaMap', ret)
      
      option = {
        title: {
          text: '▎用户分布图',
          left: 20,
          top: 20
        },
        tooltip: {
        trigger: 'item',
        formatter: '{b}<br/>{c} 人'
      },
        visualMap: {  
                    show : true,  
                    x: 'left',  
                    y: 'center',  
                    splitList: [   
                        {start: 300000, end:500000},{start: 100000, end: 300000},
                        {start: 40000, end:100000},{start: 30000, end: 40000},  
                        {start: 20000, end: 30000},{start: 10000, end: 20000},  
                        {start: 5000, end: 10000},{start: 0, end: 5000},  
                    ],  
                    color:  ['#d52303', '#db3f1e', '#e55d3a', '#ee7a57', '#f29675', '#f6af93', '#f9cbb1', '#fdebd0']  
                },  
        series: [{
          type: 'map',
          data: [],
          map: 'chinaMap', // chinaMap需要和registerMap中的第一个参数保持一致
          roam: true, // 设置允许缩放以及拖动的效果
          label: { //图形上的文本标签
          // show: true, //是否显示标签
          position: 'inside', //文本标签位置 'top','left','right','bottom','inside','insideTop','
          textStyle: { //标签文本样式
            color: 'white', //字体颜色
            fontSize: 12 //字体大小
          }
        },
          itemStyle: { //地图区域样式
          normal: { //正常状态下的样式
            areaColor: '#323c48', //地图区域颜色
            borderColor: '#404a59', //地图区域边框颜色
            borderWidth: 0.5 //地图区域边框宽度
          },
          emphasis: { //高亮状态下的样式
            // areaColor: '#2a333d' //地图区域颜色
          }
        },
          zoom: 1, // 设置初始化的缩放比例
          center: [101.7782, 36.6171], // 设置地图中心点坐标为青海（西宁市）的经纬度
        }]
      }
      mCharts.setOption(option)
          //使用jQuery的Ajax请求，通过GET方法从"http://127.0.0.1:9898/data9"获取数据，并根据返回的数据更新图表配置。
      $.get("http://127.0.0.1:9898/data9",function(data,status){
        mCharts.hideLoading() // 当服务器数据获取成功之后, 隐藏加载动画
        // 省份名称映射：去掉“省”“市”“自治区”等后缀
        function normalizeProvince(name) {
          return name
            .replace(/省|市|自治区|壮族自治区|回族自治区|维吾尔自治区|特别行政区|区|县/g, '')
            .replace(/壮族|回族|维吾尔/g, '');
        }
        const newArray = data.map(item => ({
          name: normalizeProvince(item.name),
          value: item.value
        }));
        mCharts.setOption({
          series: [{data: newArray}]
        })
      })
    })

  </script>
</body>

</html>